<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <#assign base=request.contextPath  />
    <link rel="stylesheet" href="${base}/js/layui/css/layui.css?t=1534970980648" media="all">
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script src="${base}/js/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.exedit.js"></script>
    <link rel="stylesheet" href="${base}/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${base}/css/zTreeStyle.css" type="text/css">
    <style type="text/css">
        form{
            padding:10px;
        }
        .layui-btn-radius{
            border-radius: 5px;
        }
    </style>
</head>
<body>
<form action="" class="layui-form">
    <div id="tankuang" style="margin-left: 20px;">
        <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><i style="color:red">*</i>&nbsp;角色名</label>
            <div class="layui-input-inline">
                <input name="number" lay-verify="required" autocomplete="off" class="layui-input" id="roleName" type="text">
            </div>
        </div></div>
        <div class="layui-inline">
            <label class="layui-form-label"><a style="color:red">*</a>&nbsp;区域</label>
            <div class="layui-input-block">
                <select name="city" lay-search="" lay-verify="required" id="areaId">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><a style="color:red">*</a>&nbsp;指定</label>
            <div class="layui-input-inline">
                <select name="city" lay-search="" lay-verify="required" id="appoint">
                    <option value="可以">可以</option>
                    <option value="不可以">不可以</option>
                </select>
            </div>
        </div>
        </div>
        <div style="height: 300px;width:450px;">
            <label class="layui-form-label">选择该角色可见菜单</label>

            <ul id="tree" class="ztree" style="width:300px; height: 280px; overflow:auto;border:1px solid #F0F9FF;background-color: #F0F9FF;"></ul>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">首页板块:</label>
            <input type="checkbox" name="like[write]" class="bankuai" value="1033596882212941821" title="前台管理" >
            <input type="checkbox" name="like[write]" class="bankuai"  value="1033596952794636292" title="财务管理">
            <input type="checkbox" name="like[write]" class="bankuai" value="1033596952794636293" title="营销管理"><br/>
        <#--      <input type="checkbox" name="like[write]" class="bankuai" value="1033596952794636294" title="产康预约">-->
            <input type="checkbox" name="like[write]" class="bankuai" value="1033596952794636305" title="仓库管理">
            <input type="checkbox" name="like[write]" class="bankuai" value="1033596952794636296" title="人事管理">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-radius"type="button" onclick="submi()" lay-submit="" lay-filter=""style="background-color: #0092EF;">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
        </div>
    </div>
</form>

<script>


    $.ajax({
        type : "POST", //提交方式
        url : "${base}/role/findRole",//路径
        success : function(data) {//返回数据根据结果进行相应的处理
        }
    });
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });



    var zTreeObj,
            setting = {

                view: {
                    selectedMulti: false,
                    showLine: true,
                    dblClickExpand: false
                },

                callback: {
                    //回调函数 默认展开节点
                    onAsyncSuccess:
                            function(){
                                var treeObj = $.fn.zTree.getZTreeObj("tree");
                                treeObj.expandAll(true);
                            }

                } ,
                async: {
                    enable: true,
                    url: "${base}/menuResourse/findMenuZtree"
                } ,
                data:{
                     simpleData : {
                        enable : true,
                        idKey : "id",
                        pIdKey : "pId",
                        rootPid : 0
                    }
                },
                check:{
                    enable: true,
                    chkStyle: "checkbox",
                    radioType:"all",
                    chkboxType: { "Y": "ps", "N": "ps" }
                }

            };
    //初始化树
    zTreeObj = $.fn.zTree.init($("#tree"), setting );


    function submi(){
        if($("#roleName").val()==""){
            layer.msg("请输入角色名！");
            return;
        }
        if(getAllID("tree")==""){
            layer.msg("请选择该角色可见菜单！");
            return;
        }
        var a=  getAllID("tree");
        var id="";
        var name="";
        $("input:checkbox[name='like[write]']:checked").each(function() { // 遍历name=standard的多选框
            id += ',' + $(this).val();
            name += ',' + $(this).attr('title');
        });
        var rolename=$("#roleName").val();
        var areaId=$("#areaId").val();
        var appoint=$("#appoint").val();
        var requestJson={};
        requestJson.menuId=a;
        requestJson.menuId+=id;
        requestJson.roleName=rolename;
        requestJson.areaId=areaId;
        requestJson.appoint=appoint;



        $.ajax({
            type : "POST", //提交方式
            url : "${base}/role/insertRole",//路径
            data :{param:JSON.stringify(requestJson),appoint:$("#appoint").val()},
            success : function(data) {//返回数据根据结果进行相应的处理
                layer.msg("添加成功")
                $(".dialog").hide(200)

                setTimeout(function(){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },400)


                var table = layui.table;
                //表刷新方法
                table.reload('test', {
                    url: '${base}/role/findRole'
                    ,where: {} //设定异步数据接口的额外参数
                    //,height: 300
                });
            }
        });
    }

    // findRole();
    // //查询字典表状态
    var bas='${base}';
    var homeState=   getDataByCode(bas,"area");
    for(var i=0;i<homeState.length;i++){
        $("#areaId").append(
                '<option value="'+homeState[i].id+'">'+homeState[i].name+'</option>'
        )
    }
</script>
</body>
</html>
